<template>
  <section>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <p>营业额统计</p>
          <p class="money">￥{{totalMoney}}</p>
          <p>昨日：￥{{yettotalMoney}}</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <p>付款订单数</p>
          <p class="money">{{allpay}}</p>
          <p>昨日：{{yetpay}}</p>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple">报表记录</div></el-col>
      <el-col :span="22" >
        <div class="grid-content bg-purple-light">
          <el-date-picker v-model="value4" type="month"  placeholder="选择月" value-format="yyyy-MM" @change="getTotleTable"></el-date-picker>
          <!--<el-date-picker v-model="value7" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2"></el-date-picker>-->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark tit">营业额统计</div></el-col>
    </el-row>
    <div id="chartColumn" style="width: 100%; height: 400px;"></div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark tit">付款订单统计

      </div></el-col>
    </el-row>
    <div id="chartColumn2" style="width: 100%; height: 400px;"></div>

  </section>
</template>

<script>
  import echarts from 'echarts';
  import axios from "axios";

  export default {
    data(){
      return {
        chartColumn: null,
        chartColumn2: null,
        totalMoney:"",
        yettotalMoney:"",
        allpay:"",
        yetpay:"",
        value4:"",
        xAxisdata:[],
        seriesdata:[],
        paydata:[]
      }
    },
    mounted() {
      var date=new Date;
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      month =(month<10 ? "0"+month:month);
      this.value4 = year+"-"+month;
      console.log(year+"-"+month);
      this.getTotleTable();
      this.init();
    },
    methods: {
      drawLine(){
        this.chartColumn = echarts.init(document.getElementById('chartColumn'));

        this.chartColumn.setOption({
          tooltip: {},
          xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data:this.xAxisdata
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            // data: [820, 932, 901, 934, 1290, 1330, ],
            data:this.seriesdata,
            type: 'line'
          }]
        });
      },
      drawLine2(){
        this.chartColumn2 = echarts.init(document.getElementById('chartColumn2'));

        this.chartColumn2.setOption({
          tooltip: {},
          xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data:this.xAxisdata
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            // data: [820, 932, 901, 934, 1290, 1330, ],
            data:this.paydata,
            type: 'line'
          }]
        });
      },
      init(){
        axios.get("/order/getTotle").then((response)=>{
          let res = response.data;
          if (res.status == "0"){
            this.totalMoney = res.result.totalMoney;
            this.yettotalMoney = res.result.yettotalMoney;
          }
        })
        axios.get("/order/getPay").then((response)=>{
          let res = response.data;
          if (res.status == "0"){
            this.allpay = res.result.allpay;
            this.yetpay = res.result.yetpay;
          }
        })
      },
      getTotleTable(){
        let param ={
          month:this.value4,
        };
        axios.get("/order/getTable",{
          params:param
        }).then((response)=>{
          let res = response.data;
          if (res.status == "0"){
            this.xAxisdata = res.result.xAxisdata;
            this.seriesdata = res.result.seriesdata;
            this.paydata = res.result.paydata;
            this.drawLine();
            this.drawLine2();
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.grid-content{
  text-align: center;
  margin-top: 20px;
}
.tit{
  text-align: left;
}
  .money{
    font-size: 20px;
  }
</style>
